<template>
  <aside class="main-left">
    <div class="pullDown">
      <h2 class="pullDownTitle">复材商品分类</h2>
      <ul class="pullDownList">
        <li class="menulihover"
            v-for="category in categories">
          <i></i>
          <a href="category.url"
             target="_blank">{{category.name}}</a>
          <span></span>
        </li>
      </ul>

      <div class="yMenuListCon">

        <div class="yMenuListConin" v-for="category in categories">
          <div class="yMenuLCinLisi fl">
            <ul>
              <li v-for="secondCategory in category.children">
                <a href="secondCategory.url">{{secondCategory.name}}<i class="fr">></i></a>
              </li>
            </ul>
          </div>
          <div class="yMenuLCinList fl">
            <p v-for="secondCategory in category.children">
              <a v-for="thirdCategory in secondCategory.children" :href="thirdCategory.url">
                {{thirdCategory.name}}
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<script>

import $ from 'jquery'

export default {
  name: 'Categories',
  mounted () {
    // 导航左侧栏js效果 start
    $('.pullDownList li').hover(function () {
      $('.yMenuListCon').fadeIn()
      var index = $(this).index('.pullDownList li')
      if (!($(this).hasClass('menulihover') || $(this).hasClass('menuliselected'))) {
        $($('.yBannerList')[index]).css('display', 'block').siblings().css('display', 'none')
        $($('.yBannerList')[index]).removeClass('ybannerExposure')
        setTimeout(function () {
          $($('.yBannerList')[index]).addClass('ybannerExposure')
        }, 60)
      } else {
      }
      $(this).addClass('menulihover').siblings().removeClass('menulihover')
      $(this).addClass('menuliselected').siblings().removeClass('menuliselected')
      $($('.yMenuListConin')[index]).fadeIn().siblings().fadeOut()
    }, function () {

    })
    $('.pullDown').mouseleave(function () {
      $('.yMenuListCon').fadeOut()
      $('.yMenuListConin').fadeOut()
      $('.pullDownList li').removeClass('menulihover')
    })
    // 导航左侧栏js效果  end
  },
  data: () => {
    return {
      categories: [
        {
          name: '分类1',
          url: '',
          children: [
            {
              name: '子分类1',
              url: '',
              children: [
                {
                  name: '三级分类1',
                  url: ''
                }
              ]
            },
            {
              name: '子分类2',
              url: '',
              children: [
                {
                  name: '三级分类1',
                  url: ''
                }
              ]
            },
            {
              name: '子分类3',
              url: '',
              children: [
                {
                  name: '三级分类1',
                  url: ''
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

